<template>
  <transition
    name="notification-fade"
    appear
  >
    <div 
      v-if="currentNotification"
      class="notification" 
      :class="[`notification-${currentNotification.type}`]"
    >
      <div class="notification-icon">
        <el-icon><WarningFilled /></el-icon>
      </div>
      <div class="notification-content">
        <div class="notification-title">{{ currentNotification.title }}</div>
        <div class="notification-message">{{ currentNotification.message }}</div>
      </div>
      <div class="notification-close" @click="closeNotification">
        <el-icon><Close /></el-icon>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import emitter from '@/utils/emitter';
import { WarningFilled, Close } from '@element-plus/icons-vue';

const currentNotification = ref(null);
let timer = null;

const addNotification = (notification) => {
  // 清除旧的定时器
  if (timer) {
    clearTimeout(timer);
  }
  
  // 设置新的通知
  currentNotification.value = {
    title: notification.title || '系统提示',
    message: notification.message,
    type: 'error', // 始终使用错误样式
    duration: notification.duration || 4000
  };
  
  // 设置自动关闭
  if (currentNotification.value.duration > 0) {
    timer = setTimeout(() => {
      closeNotification();
    }, currentNotification.value.duration);
  }
};

const closeNotification = () => {
  currentNotification.value = null;
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
};

onMounted(() => {
  emitter.on('notification', addNotification);
});
</script>

<style lang="scss" scoped>
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 400px;
  max-width: 90%;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 8px;
  background-color: #fff0f0;
  border: 1px solid #ff4d4f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  &-icon {
    margin-right: 12px;
    font-size: 20px;
    color: #ff4d4f;
    display: flex;
    align-items: center;
  }
  
  &-content {
    flex: 1;
  }
  
  &-title {
    font-weight: bold;
    font-size: 15px;
    color: #ff4d4f;
  }
  
  &-message {
    font-size: 14px;
    color: #333;
    word-break: break-word;
  }
  
  &-close {
    margin-left: 12px;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    
    &:hover {
      color: #666;
    }
  }
}

.notification-fade-enter-active,
.notification-fade-leave-active {
  transition: all 0.3s ease;
}

.notification-fade-enter-from,
.notification-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -20px);
}
</style> 